<!--
@description ：批量加好友自动版
-->

<template>
  <div class="app-container">
    <NormalForm :enumOpt="enumOpt" :formList="formList" :operateForm="queryForm" pageTitle=""
                @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="card">
      <div class="right-btn" style="margin-right: 0; padding: 0 0 16px 0">
        <el-button type="primary" plain size="mini" @click="addTask">新增任务
        </el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" max-height="560" min-height="420" style="width: 100%">
        <el-table-column :show-overflow-tooltip="false" align="center" label="任务信息" min-width="220">
          <template slot-scope="{ row }">
            <p style="color: black;text-align: left">{{row.batchName}}</p>
            <p style="color: #999; text-align: left">数据: {{ row.ocLeadName }}</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="ID" min-width="180"
                         prop="batchId"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="创建时间" min-width="180"
                         prop="createTime"></el-table-column>
        <el-table-column align="center" label="超级企微" min-width="200" prop="userName">
          <template slot-scope="{ row }">
            <div style="display: flex;align-items: center;justify-content: center">
              <img :src="row.imageUrl" alt="" v-if="row.imageUrl" style="width:30px; height:30px;border-radius:50%;margin-right:6px">
              <span style="line-height: 30px">{{row.userName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="请求/无效/请求失败" min-width="160"
                         prop="reqCount">
          <template slot-scope="{ row }">
            {{row.reqCount || 0}}/{{row.noUseCount || 0}}/{{row.reqFailedCount || 0}}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="请求成功/通过" min-width="160"
                         prop="updateTime">
          <template slot-scope="{ row }">
            {{row.reqSuccessCount || 0}}/{{row.addCount || 0}}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="通过率" min-width="160"
                         prop="addPercent">
          <template slot-scope="{ row }">
            {{row.addPercent || 0}}%
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="创建人" min-width="160"
                         prop="createBy"></el-table-column>
        <el-table-column align="center" label="任务状态" min-width="100px" prop="batchState">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.batchState == 0">未添加
            </el-tag>
            <el-tag type="success" v-if="scope.row.batchState == 1">已成功
            </el-tag>
            <el-tag type="info" v-if="scope.row.batchState == 2">已失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                         width="200">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: space-around">
              <el-button size="mini" type="text" @click="toDetail(row)">详情</el-button>
              <el-button size="mini" type="text" @click="toCpoy(row)">复用</el-button>
              <el-button size="mini" type="text" @click="toSchedule(row)">拓客进度</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
  </div>
</template>
<script>
import {getAutomateList} from "@/api/beathAddAuto";
export default {
  name: "beathAuto", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        selectTime: null,
        batchState: '',
        batchName: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '',
          value: null,
          prop: 'selectTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd'
        },
        {
          label: '任务状态',
          value: '',
          prop: 'batchState',
          type: 'SELECT',
          emunName: 'batchStateList',
        },
        {
          label: '任务名称',
          value: '',
          prop: 'batchName',
          type: 'INPUT',
          emunName: '',
        }
      ],
      enumOpt: {
        batchStateList: [
          { dictValue: '0', dictLabel: '未添加' },
          { dictValue: '1', dictLabel: '已成功' },
          { dictValue: '2', dictLabel: '已失败' },
        ],
      },
      loading: false,
      tableList: [],
      total: 0,
    }
  },
  watch: {},
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
       this.queryForm = {
         selectTime: null,
         batchState: '',
         batchName: '',
         pageNum: 1,
         pageSize: 20,
       }
       this.getListFn()
    },
    getListFn(){
       let obj = {
         batchState: this.queryForm.batchState,
         batchName: this.queryForm.batchName,
         startTime: this.queryForm.selectTime && this.queryForm.selectTime[0],
         endTime: this.queryForm.selectTime && this.queryForm.selectTime[1],
         pageNum: this.queryForm.pageNum,
         pageSize: this.queryForm.pageSize,
       }
       this.loading = true
       getAutomateList(obj).then(res => {
         this.tableList = res.rows || []
         this.total = res.total || 0
         this.loading = false
       }).catch(error => {
         this.loading = false
       })
    },
    addTask(){
      this.$router.push({
        path: '/customerOperations/attractCustomers/addBeathAutoTask',
        query: {
          flag: '1'
        }
      })
    },
    toCpoy(row){
      this.$router.push({
        path: '/customerOperations/attractCustomers/addBeathAutoTask',
        query: {
          flag: '2',
          batchId: row.batchId
        }
      })
    },
    toSchedule(row){
      this.$router.push({
        path: '/customerOperations/attractCustomers/beathAutoSchedule',
        query: {
          batchId: row.batchId
        }
      })
    },
    toDetail(row){
      this.$router.push({
        path: '/customerOperations/attractCustomers/beathAutoTaskDetail',
        query: {
          batchId: row.batchId
        }
      })
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
  },
  mounted() {
     this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

.app-container {
  height: 100%;
  padding: 0;
}

.card{
  background-color: #fff;
  padding: 10px 26px 26px;
}

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

::v-deep.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

::v-deep.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}
</style>
